<template>
  <div class="about">
    <GeoLocation/>
    <div>
      <h3>
      最后更新时间：{{updateTime}}
    </h3>
    <p class="title">
        <span class="color">{{location.name}}</span>
        天气空气质量
        |
        数据发布时间：{{now.pubTime}}
    </p>
  </div>
  <div>
    <p>
      空气质量指数：{{now.aqi}}
    </p>
    <p>
      空气质量指数等级：{{now.level}}
    </p>
    <p>
      空气质量指数级别：{{now.category}}
    </p>
    <p>
      空气质量的主要污染物：{{now.primary}}
    </p>
    <p>
      PM10：{{now.pm10}}
    </p>
    <p>
      PM2.5：{{now.pm2p5}}
    </p>
    <p>
      二氧化氮：{{now.no2}}
    </p>
    <p>
      二氧化硫：{{now.so2}}
    </p>
    <p>
      二氧化硫：{{now.co}}
    </p>
    <p>
      二氧化硫：{{now.o3}}
    </p>
  </div>

  </div>

</template>

<script>
import { API_AIR,KEY } from "@/common/constrant";
import axios from "axios";
import { mapState } from 'vuex';
import"qweather-icons/font/qweather-icons.css";
import GeoLocation from '@/components/GeoLocation.vue';
import dayjs from 'dayjs';


export default{
   components: {
    GeoLocation},
  data(){
    return{
      now:{},
    };
  },
  computed:{
    ...mapState([
      "location"
    ]),
    updateTime:function(){
      return dayjs(this.now.obsTime).format("YYYY/MM/DD HH:mm:ss");
    },
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      axios
      .get(API_AIR,{
        params:{
          key:KEY,
          location:this.location.id,
          },
}).then((res)=>{
  console.log(res.data);
  this.now = res.data.now;
});
    },
  },
  watch: {
    //当监听到location有变化时,重新调用网络请求getData,发起新的请求
    location: function () {
      this.getData();
    },
  },
};
</script>
<style scoped>
.title{
  color: red;
}

</style>
